<template>
  <div style="margin-left: 150px;font-size: 30px;margin-top: 10px;height: auto">
    <a href="#" style="color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> |
      朗沃商城</a>
  </div>
  <div class="cjh" style="display:flex;margin-top: 20px">
    <div style="width: 500px;height: auto;text-align:center">
      <p style="font-size: 38px;color: white;padding-top: 270px">成功起点，LOVO首选</p>
      <p style="font-size: 22px;color:#d3d3d3;">优质产品，超低价格，太好逛了吧</p>
      <p style="font-size: 22px;color:#d3d3d3;">好生活，购实惠</p>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin: 0 auto">
      <div>
        <el-form :rules="rules" :model="userObj" ref="userObj"
                 style="background-color: white;width: auto;height: auto;">
          <span style="margin-left: 350px;font-size: 30px">补全信息</span>
          <div style="display: flex;padding-top: 20px">
            <div>
              <el-form-item prop="userName">
                <span style="font-size: 20px">用户名：{{ userObj.userName }}</span>
              </el-form-item>


              <el-form-item prop="userRealName">
                <span style="font-size: 20px">真实姓名：{{ userObj.userRealName }}</span>
              </el-form-item>


              <el-form-item prop="userGender">
                <span style="font-size: 20px">用户性别：{{ userObj.userGender }}</span>
              </el-form-item>


              <el-form-item prop="userPhone">
                <span style="font-size: 20px">用户电话：{{ userObj.userPhone }}</span>
              </el-form-item>
              <div style="display: flex">
                <span style="font-size: 20px">公司名称：</span>
                <el-form-item prop="companyName">
                  <el-input prefix-icon="office-building" v-model="userObj.companyName" placeholder="请输入公司名称"
                            style="width: 170px"></el-input>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex;margin-left: 90px;margin-right: 90px">
              <el-upload
                  class="avatar-uploader"

                  action="picture/file/uploadFileAb"
                  :show-file-list="false"
                  :limit="1"
                  accept="image/*"
                  :on-success="qulificationPicSuccess"
                  :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">资质图片，且不超过 500kb</div>
                </template>
              </el-upload>
              <el-upload
                  class="avatar-uploader"
                  action="picture/file/uploadFileAb"
                  :show-file-list="false"
                  :limit="1"
                  accept="image/*"
                  :on-success="identityPicSuccess"
                  :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl2" :src="imageUrl2" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">身份证正面图片，且不超过 500kb</div>
                </template>
              </el-upload>
            </div>
          </div>
          <div style="padding-bottom: 20px">
            <el-button size="large" style="margin: 0 25px" type="primary" @click="ackLogon()">提交</el-button>
            <el-button size="large" style="margin: 0 25px" @click="$router.back">返回</el-button>
          </div>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "Logon",
  created() {
    this.userObj = JSON.parse(sessionStorage.getItem('user'))
  },
  data() {
    return {
      codePic: "",
      userObj: {
        identityPic: '',
        companyName: '',
      },
      rules: {
        companyName: [
          {required: true, message: '请输入公司名', trigger: 'blur'},
        ]
      },
      imageUrl1:'',
      imageUrl2:'',
    }
  },
  methods: {
    ackLogon() {
      console.log(this.userObj)
      this.$refs['userObj'].validate((valid) => {
        if (valid && this.userObj.identityPic !== '' && this.userObj.companyName !== '') {
          /*
          验证通过
           */
          axios.post('api/userDetail/userReplenishRegister',this.userObj).then(p=>{
            if (p.data.code===200){
              ElMessage.success(p.data.msg)
              sessionStorage.setItem('user', JSON.stringify(p.data.data));
              this.$router.push('app');

              //启动websocket监听是否审核通过
              let ws = new WebSocket("ws://162.14.78.4:8003/userAudit");

              ws.onopen = function(evt) {
                console.log("Connection open ...");
                //发送用户编号给java系统
                ws.send(sessionStorage.getItem("userNo"));
              };

              ws.onmessage = function(evt) {
                console.log(evt.data)
                if (JSON.parse(evt.data).userNo===sessionStorage.getItem('userNo')){
                  if (JSON.parse(evt.data).auditStatus===1){
                    ElMessage.success("审核通过")
                  }else{
                    ElMessage.error("审核未通过，"+JSON.parse(evt.data).unpassReason)
                  }
                  sessionStorage.setItem("userDiscount", JSON.parse(evt.data).userDiscount);
                  sessionStorage.setItem('user', evt.data);
                }
                ws.close();
              };

              ws.onclose = function(evt) {
                console.log("Connection closed.");
              };

            }else{
              ElMessage.error(p.data.msg)
            }
          })
        } else {
          this.$notify({
            title: '警告',
            message: '请完成信息填写，谢谢',
            type: 'warning',
          })
          return false;
        }
      })
    },
    qulificationPicSuccess(newFileName) {
      console.log(newFileName)
      this.userObj.qulificationPic = newFileName;
      axios.get('picture/file/getBase64Img?ImgName='+newFileName).then(p=>{
        this.imageUrl1=p.data;
      });
    },
    identityPicSuccess(newFileName) {
      this.userObj.identityPic = newFileName;
      axios.get('picture/file/getBase64Img?ImgName='+newFileName).then(p=>{
        this.imageUrl2=p.data;
      });
    }
  }
}
</script>

<style scoped>
.cjh {
  width: 1600px;
  margin: auto;
  background-image: url("../img/注册.png");
  background-repeat: repeat-y;
  background-position: center;
  background-attachment: fixed;
  background-size: 1600px auto;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>